<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
        <meta name="keywords" content="shuangbiao,秦双彪,双彪" />
        <meta name="description" content="秦双彪的个人页面。" />
        <title>彪哥的道场</title>
        <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
        <link rel="stylesheet" href="./res/fonts/fonts.css" />
        <style>
            body{ margin: 0; padding: 0; }    
            .container{ width: 100%; display: flex; background-color: #3c5098; }
            .concent{ 
                text-align: center;
                align-self: center;
                margin: 0 auto;
                font-family: 'YRDZST', monospace, sans-serif; 
                font-size: 2em;
            }

            .concent h2{ color: white; }
            .slogon{ color: #e4caa3; }

            @media screen and (max-width: 768px) {
                .concent { font-size: 1.5em; }
                .slogon { font-size: 0.8em; }
            }

        </style>

    </head>
    <body>
        <section class="container" id="wrap">
            <div class="concent">
                <svg id="taiji" width="100" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1">
                    <path d="M1 50 A 49 49 0 0 0 99 50 A 24.5 24.5 0 0 1 50 50 A 24.5 24.5 0 0 0 1 50 Z"
                        fill="#3c5098" stroke="#6a7cbc"/>
                    <path d="M1 50 A 49 49 0 0 1 99 50 A 24.5 24.5 0 0 1 50 50 A 24.5 24.5 0 0 0 1 50 Z"
                        fill="#6a7cbc" stroke="#6a7cbc" />
                    <circle cx="25" cy="50" r="6.25" fill="#6a7cbc" />
                    <circle cx="75" cy="50" r="6.25" fill="#3c5098" />
                </svg>

                <h2>彪哥的道场</h2>
                <p class="slogon">
                    『
                    <span class="typed-quotes">道可道 非常道 名可名 非常名</span>
                    <span class="typed-cursor">_</span>
                    』
                </p>
            </div>
        </section>
    </body>
</html>
<script>
    function changeWrapHeight(){
        let height = document.documentElement.clientHeight;
        document.getElementById('wrap').style.height = `${height}px`;
    }
    changeWrapHeight();
    window.onresize = () => changeWrapHeight();

    var dom_quotes = document.querySelector('.typed-quotes');
    var slogon = dom_quotes.innerHTML;
    var i = 0;
    function typing(){
        if (i <= slogon.length) {
            dom_quotes.innerHTML = slogon.slice(0, i++);
            setTimeout('typing()', 200);
        } else {
            //dom_quotes.innerHTML = slogon;
            document.querySelector('.typed-cursor').style.display = 'none';
        }
    }
    typing();
    
    var taiji = document.getElementById('taiji');
    var isTrans = true;
    var transInt = null;
    var deg = 0;

    taiji.addEventListener('click', e => {
        
        if (isTrans) {
            isTrans = false;

            transInt = setInterval(function(){
                taiji.style.transform = `rotate(${deg++}deg)`;
                if (deg === 360){
                    deg = 0;
                }
            });

        } else {
            transInt = window.clearInterval(transInt);
            isTrans = true;
        } 
    });

</script>